<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>
	<style type="text/css">
		.box{
			width: 300px;
			height: 200px;
			background: red url() 0 0 no-repeat;
			color: #fff;
			font-size: 40px;
			margin: 20px;
		}
		.box4{
			float: left;
			background: #3F48CC url() 0 0 no-repeat;
		}
		.box1{
			float: left;
			height: 300px;
		}

		.box2{
			float: left;
			background: #A349A4 url() 0 0 no-repeat;
		}

		.box3{
			float: left;
			background: #FFF200 url() 0 0 no-repeat;
		}


	</style>
</head>
<body>
	<div class="box box1">1</div>
	<div class="box box2">2</div>
	<div class="box box3">3</div>
	<div class="box box4">4</div>
	<!-- 同级元素要浮动就一起浮动，不浮云就一起不浮动。 -->
</body>
</html>